<template>
  <view class="signInWrap">

    <view class="signInCont">

      <view class="signInTop">
        <text class="signInTitle">签到领积分</text>
        <text class="signInText">累计积分可兑换奖励</text>
        <view class="signInProgress">
          <progress percent="80" color="#00FF90" active stroke-width="12" border-radius="5"/>
        </view>
        <view class="signInNum">
          已签到<text>2</text>天，继续加油~
        </view>
      </view>

      <view class="signInWeekWrap">
        <view class="signInWeek" v-for="item in 7" :key="item">
          <view class="signInWeekTop">第{{item+1}}天</view>
          <view class="signInWeekCenter"></view>
          <view class="signInWeekBot">1积分</view>
        </view>
      </view>


    </view>
  </view>
</template>


<script>
export default {
  name: "signIn"
}
</script>



<style scoped lang="scss">
  page{
    background-color: rgba(0, 0, 0, 0.50);
  }
  .signInWrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .signInCont {
    padding: 40rpx;
    width: 576rpx;
    height: 772rpx;
    background: #5ef6e6;
    border-radius: 10px;
  }

  .signInTop{
    .signInTitle{
      font-weight: bold;
      font-size: 52rpx;
      display: block;
    }
    .signInText{
      font-size: 28rpx;
    }
    .signInProgress{
      margin: 24rpx 0 0 0;
    }
    .signInNum{
      color: #3D3D3D;
      font-size: 30rpx;
      font-weight: bold;
      margin-top: 45rpx;
      text{
        font-size: 32rpx;
        color: #13CFC7;
        padding: 0 10px 0 10px;
      }

    }
  }

  .signInWeekWrap{
    margin-top: 32rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 8rpx;
    justify-content: center;
    .signInWeek{
      width: 118rpx;
      height: 148rpx;
      background-color:#13CFC7;
      border-radius: 20rpx;
      color: white;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 8rpx 0 8rpx 0;
      .signInWeekTop{
        font-size: 20rpx;
      }
      .signInWeekBot{
        font-size: 24rpx;
      }
    }
  }
</style>
